<template>
	<div class="container">
		<router-link tag="div" class="nav-item1" v-for="(list,index) in lists" :to="{name:list.to}" :key="index">
			<i :class="['iconfont',list.type]"></i>
			<span>{{list.name}}</span>
		</router-link>
	</div>

</template>

<script>
	export default {
		name: 'nav',
		data() {
			return {
				lists: [{
					to: 'mylesson',
					type: 'icon-faxian',
					name: '发现'
				}, {
					to: 'myvideo',
					type: 'icon-iconfontguangchang',
					name: '广场'
				}, {
					to: 'afterlogin',
					type: 'icon-my',
					name: '我的'
				}]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 1.20rem!important;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #ff6633;
		align-items: center;
		/*		padding: 0.20037rem 0;
*/
		position: fixed;
		left: 0;
		bottom: 0;
		.nav-item1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			/*	height: 1.56296rem!important;;		
            flex: 1;
			&:nth-child(2){
				border-left:1px solid #FFFFFF;
				border-right:1px solid #FFFFFF;
			}*/
			i {
				font-size: 0.400741rem;
			}
			&:nth-child(1) i {
				color: #FFFFFF;
			}
			&:nth-child(2) i {
				color: #FFFFFF;
			}
			&:nth-child(3) i {
				color: #FFFFFF;
			}
			span {
				font-size: 0.32037rem;
				font-weight: 600;
				/*margin-top: 0.185185rem;
				margin-bottom: 0.18rem;*/
				color: #FFFFFF;
				font-family: Helvetica;
			}
		}
	}
</style>